<template>
	<div class="tuiJian" v-if="listArr && listArr.length">
		<div class="title center flex-start">
			<img src="@/assets/image/zhuTi/t3.png" alt="" />
			<div class="f16 ctheme fbold">最近浏览</div>
		</div>
		<router-link
			:to="`/knowledgeDetails?id=${item.id}&swId=${item.swId}`"
			class="box center posr"
			v-for="item in listArr"
			:key="item.id"
		>
			<div class="circle"></div>
			<div class="flex">
				<div class="f14 nowrap c60 hover">{{ time(item.createTime) }}</div>
				<div class="f14 nowrap c60 hover">{{ item.title }}</div>
				<div class="c999 f14 hover">{{ item.categoryName }}</div>
			</div>
		</router-link>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { getAxios } from "/axios"
const route = useRoute()
const router = useRouter()
const props = defineProps({
	id: {
		type: String,
		default: "",
	},
})
const listArr = ref([])
async function list() {
	listArr.value = await getAxios(`/knowledge/kbBasicWarehouse/recentPreviewBasicList?size=6&swId=${props.id}`)
}
list()
function time(item) {
	return item.substring(0, 10)
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.tuiJian {
	width: 250px;
	background: #ffffff;
	border-radius: 3px;
	margin-left: 10px;
	margin-bottom: 15px;
	padding-bottom: 18px;
	@include maxWidth(1200) {
		width: 200px;
	}
	.box {
		padding: 15px 20px 0;

		&:not(:last-of-type):after {
			content: "";
			position: absolute;
			border-left: 1px dashed #c7c7c7;
			height: 35px;
			left: 23px;
			top: 55px;
		}

		.circle {
			width: 8px;
			height: 8px;
			background: #2972fa;
			border-radius: 50%;
			box-shadow: 0 0 1px 5px rgba(41, 114, 250, 0.1);
			margin-right: 20px;
		}
	}

	.title {
		padding: 15px 25px;
		background: #eaf1ff;

		img {
			width: 18px;
			margin-right: 10px;
		}
	}
}
</style>
